<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background: #eee;
            display: none;
        }

        .close {
            float: right;
        }
    </style>
</head>

<body>

    <div id="a" class="ad">
        <span id="c" class="close">X</span>
        <p>
            <strong id="time">10</strong>
            s之后自动关闭
        </p>

    </div>

    <script>

        var oClose = document.getElementById('c');
        var oAd = document.getElementById('a');
        var oTime = document.getElementById('time');

        fn();

        function fn() {
            // 3s之后广告出现
            var t1 = setTimeout(function () {
                // 广告出现
                oAd.style.display = 'block';

                // 广告出现了才有关闭

                // 1 点击关闭
                // 点×就关闭广告
                oClose.onclick = function () {
                    // oAd.style.visibility = 'hidden' ;
                    oAd.style.display = 'none';
                    // 广告关闭以后，数字归10 ， 定时器要被清除
                    oTime.innerHTML = 10 ;
                    clearInterval(t) ;
                    fn()
                }

                // 2 倒计时关闭
                var t = setInterval(function () {
                    oTime.innerHTML--;
                    if (oTime.innerHTML == 0) {
                        clearInterval(t);
                        // 关闭广告
                        oAd.style.display = 'none';
                        oTime.innerHTML = 10 ;
                        fn()
                    }
                }, 500)


            }, 3000)
        }



    </script>

</body>

</html>